import './index.css';

// react
import React,{ useState } from 'react';
import {Route,Switch} from 'react-router-dom';

// antd
import { Layout,Button } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,

} from '@ant-design/icons';

// 路由


// 自定义界面和组件
import {appName} from '../../config/index.js';


const { Header, Sider, Content } = Layout;





export default function Main() {

  const [collapsed,setCollapsed] = useState(false); // 侧边栏按钮状态

  const toggle = function() {
    setCollapsed(!collapsed);
  }

  const data = [];
  data.length = 14;
  data.fill(888);

  return (

    <Layout className="app">
        <Header className="app_header">

            <div className="header" >

            {/* logo */}
            <div className="header_logocontainer">
                <div className="header_logoimg" >{appName}</div>
            </div>
            {/* 头部菜单栏 */}
            <div className="header_menu" >
                
                
            </div>

            <div className="header_logout" >
                <Button type="default" shape="round">Logout</Button>
            </div>
            </div>

        </Header>

    
        <Layout className="app_buttom">
        

            {/* 侧边导航栏 */}
            <Sider trigger={null} collapsible collapsed={collapsed} className="app_sider">
            
                
                <div className="sider_switchicon">
                {/* 使用react 提供的api构建 react 组件 */}
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: toggle,
                    
                })}
                </div>
                {/* 放文件夹和文件展示 */}

            </Sider>

            {/* 右侧主体 */}
            <Content className="app_content"  >
                {/* content */}
                {
                    data.map((item,key) => {
                        return (
                            <p key={key}> {item} </p>
                        )
                    })
                }

            </Content>
            

        </Layout>

    </Layout>
    
  );
}